<template>
  <div class="drop-down-main">
    <el-dropdown ref="dropdown1" placement="bottom-start" @command="(command:string) => {handleCommand(command)}">
      <div class="icon-box">
        <i :class="props.fileData ? 'iconbimgis_gengduo' : 'icona-xinzengyuanjiao'" class="iconfont"></i>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-if="!props.fileData?.filepath" command="upLoad">
            <FileUpload :files="formData.cover" @send-file="handleUploadFile" />
          </el-dropdown-item>
          <el-dropdown-item v-if="!props.fileData?.filepath" command="newText">
            <p class="action-item">
              <svg class="action-icon" aria-hidden="true" width="16" height="16">
                <use xlink:href="#iconwenben1" />
              </svg>
              <span class="action-desc">新建文本文档</span>
            </p>
          </el-dropdown-item>
          <!-- <el-dropdown-item v-if="!props.fileData" divided command="newFiles">
            <div class="action-item">
              <div class="icon">
                <svg class="action-icon" aria-hidden="true" width="16" height="16">
                  <use xlink:href="#iconwenjianjia1" />
                </svg>
              </div>
              <div class="action-desc">新建文件夹</div>
            </div>
          </el-dropdown-item> -->
          <el-dropdown-item v-if="props.fileData && !props.fileData.filepath" command="newChildren">
            <div class="action-item">
              <div class="icon">
                <svg class="action-icon" aria-hidden="true" width="16" height="16">
                  <use xlink:href="#iconwenjianjia1" />
                </svg>
              </div>
              <div class="action-desc">新建子文件夹</div>
            </div>
          </el-dropdown-item>
          <el-dropdown-item v-if="props.fileData" command="rename"><i class="iconfont iconwangpan-zhongmingming1x"></i>重命名</el-dropdown-item>
          <el-dropdown-item v-if="props.fileData" command="delete" divided><i style="color: red" class="iconfont iconwangpan-cuohao1x" ></i>删除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import FileUpload from '@/components/FileUpload.vue'

const props = defineProps({
  fileData: {
    type: Object,
    default: () => {}
  }
})

const formData = ref({
  attachments: [],
  cover: [],
  fileName: '',
  newFileName: '',
  id: 0,
  filename: ''
})
/**
 * @desc: 下拉菜单指令
 */
const emit = defineEmits([
  'send-new-text',
  'send-new-files',
  'send-uploaded-files',
  'send-new-children',
  'send-rename',
  'send-delete',
  'send-up-children-file'
])
const handleCommand = (command: string) => {
  switch (command) {
    case 'upLoad': {
      emit('send-up-children-file')
      break
    }
    case 'newText': {
      emit('send-new-text')
      break
    }
    case 'newFiles': {
      emit('send-new-files')
      break
    }
    case 'newChildren': {
      emit('send-new-children')
      break
    }
    case 'rename': {
      emit('send-rename')
      break
    }
    case 'delete': {
      emit('send-delete')
      break
    }
  }
}

/**
 * @desc: 上传成功后的回调
 */
const handleUploadFile = (res: { originalname: string }) => {
  emit('send-uploaded-files', res)
}
</script>

<style lang="less" scoped>
.drop-down-main {
  .icon-box {
    width: 25px;
    height: 40px;
    cursor: pointer;

    &:hover .iconfont {
      color: #409eff;
    }

    .iconfont {
      font-size: 16px;
      line-height: 40px;
    }
  }
}
:deep(.el-dropdown-menu__item) {
  .action-item {
    display: flex;
    justify-content: center;
    align-items: center;
    .action-icon {
      padding-right: 5px;
      margin-bottom: -2px;
    }
  }
}
</style>
